<template>
  <div>
    <!--  <a-list-->
    <!--    item-layout="horizontal"-->
    <!--    :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"-->
    <!--    :data-source="props.pictureList"-->
    <!--  >-->
    <!--    <template #renderItem="{ item }">-->
    <!--      <a-list-item>-->
    <!--        <a-card hoverable class="pictureList">-->
    <!--          &lt;!&ndash;图片&ndash;&gt;-->
    <!--          <template #cover>-->
    <!--            <img :src="item.url" />-->
    <!--          </template>-->
    <!--          &lt;!&ndash;标题&ndash;&gt;-->
    <!--          <a-card-meta :title="item.title" />-->
    <!--          &lt;!&ndash;下载&ndash;&gt;-->
    <!--        </a-card>-->
    <!--      </a-list-item>-->
    <!--    </template>-->
    <!--      </a-list>-->

    <a-card :style="{ width: '360px' }">
      <template #cover>
        <div
          :style="{
            height: '204px',
            overflow: 'hidden',
          }"
        >
          <img
            :style="{ width: '100%', transform: 'translateY(-20px)' }"
            alt="dessert"
            src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
          />
        </div>
      </template>
      <a-card-meta title="这是图片名" description="这是一段图片描述">
      </a-card-meta>
      <template #actions>
        <a-space>
          <a-popover title="图片链接">
            <a-button>下载</a-button>
            <template #content>
              <a href="https://yiyan.baidu.com/?from=baidu_pc_index"
                >http://localhost:8080/api/get/imgs</a
              >
            </template>
          </a-popover>
        </a-space>
      </template>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, ref } from "vue";
import {
  IconThumbUp,
  IconShareInternal,
  IconMore,
} from "@arco-design/web-vue/es/icon";

// 点击弹窗
const visible = ref({});

const showModal = (id: any) => {
  visible.value[id] = true;
};

const handleOk = (id: any) => {
  visible.value[id] = false;
};

interface Props {
  pictureList: any[];
}

const props = withDefaults(defineProps<Props>(), {
  pictureList: () => [],
});
</script>

<style>
.icon-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.1s;
}
.icon-hover:hover {
  background-color: rgb(var(--gray-2));
}
</style>
